<template>
    <div id="msite_container">
        <head-top :head-title="msiteTitle" search-title="true">
            <router-link to="/search" slot='search' class="search"><span>搜索</span></router-link>
            <router-link to="/my" slot='my' class="my">我的</router-link>
        </head-top>
        <!-- 轮播区 -->
        <nav>
            <div class="swiper-container" v-if="footType.length">
                <div class="swiper-wrapper">
                    <div class="swiper-slide nav_swiper" v-for="(item, index) in footType" :key="index">
                       <router-link to="/home" v-for="(footItem, index) in item" :key="index" class="nav_box">
                            <figure>
                                <img :src="imgBaseUrl + footItem.image_url" alt="" class="nav_img">
                                <figcaption class="nav_span">{{footItem.title}}</figcaption>
                            </figure>
                       </router-link>
                    </div>
                </div>
                 <div class="swiper-pagination"></div><!--分页器。如果放置在swiper-container外面，需要自定义样式。-->
            </div>
             <img src="../../assets/fl.svg" class="fl_back animation_opactiy" v-else>
        </nav>

        <!-- 列表区 -->
        <div class="shop_list">
            <h4>附近商家</h4>
            <shop-list v-if='hasGethash' :geohash='geohash'></shop-list>
        </div>

        <!-- 底部 -->
        <footer-down></footer-down>
    </div>
</template>

<script>
    import {mapMutations} from 'vuex'
    // import headTop from '../../components/header/head'
    // import shopList from '../../components/shoplist'
    import {cityGuess, msiteAddress, msiteFootType} from '../../api/api'
    import Swiper from 'swiper'
    import '../../../node_modules/swiper/css/swiper.min.css'

   export default {
       data(){
           return {
               geohash: '',  // city页面传递过来的地址geohash
               msiteTitle: '请选择地址...',  //头部标题
               hasGethash:false,   //获取到当前的地理位置信息再获取商家列表，shopList组件才加载
               footType:[],  //食品类型
               imgBaseUrl: 'https://fuss10.elemecdn.com', //图片域名地址
           }
       },

        async beforeMount(){
             //没有传geohash过来就请求下
            if(!this.$route.query.geohash){
                await cityGuess().then((res)=>{
                  this.geohash = res.data.latitude+ ',' +res.data.longitude;
                })
            }else{
                this.geohash = this.$route.query.geohash;
            };
            //保存geohash 到vuex
           this.SAVE_GEOHASH(this.geohash);

            //获取当前的地理位置
            await msiteAddress(this.geohash).then((res)=>{
                this.msiteTitle = res.data.name;
                // 记录当前经度纬度到vuex
                this.RECORD_ADDRESS(res.data);  
                this.hasGethash = true;
            })
        },

       async mounted(){
           msiteFootType(this.geohash).then((res)=>{
               let resArr = res.data;
               let resArrs = [...resArr];
               let footArr = [];
               for(let i = 0, j = 0; i <resArr.length; i += 8, j++){
                   footArr[j] = resArrs.splice(0, 8);
               }
                this.footType = footArr;
           }).then(()=>{
               //初始化swiper
                new Swiper('.swiper-container', {
                    pagination: '.swiper-pagination',
                    loop: true
                });
           })
            
        },
       methods:{
            ...mapMutations([
               'RECORD_ADDRESS', 'SAVE_GEOHASH'
           ])
       }
   }

</script>

<style scoped lang="scss">
    @import 'src/style/mixin';
    #msite_container{padding:2.35rem 0 1.95rem;}
    .search{
        position: absolute;
        left: .5rem;
        top: 50%;
        transform: translateY(-50%);
        span{
             @include sc(0.75rem,#fff);
        }
    }
    .my{
        position: absolute;
        right: .5rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: .75rem;
        color: #fff;
    }
    .swiper-container{
    --swiper-theme-color: #ff6600;
    --swiper-pagination-color: #00ff33;/* 两种都可以 */
  }
    nav{
        height: 8.5rem;
        background: #fff;
        .nav_swiper{
            display: flex;
            flex-wrap:wrap;
            .nav_box{
                width:25%;
                display: flex;
                justify-content: space-between;
                text-align:center;
                padding: .5rem;
                .nav_img{
                    @include wh(1.8rem, 1.8rem);
                }
                .nav_span{
                font-size:.75rem; 
                }
            }
        }
    }
    .shop_list{
        background-color: #fff;
        margin-top:.5rem;
      h4{
        padding:.5rem;
        font-size:.7rem;
        border-bottom: 1px solid #CCC;
      }
    }
</style>